<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <embed src="game_music.mp3" hidden="true" autostart="true" loop="true">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 450px;
            height: 600px;
            margin: 50px auto;
            background-image: url("img/bg.jpg");
            background-size: 100% 100%;
            position: relative;
            overflow: hidden;

        }

        #head {
            position: absolute;
            top: 70px;
            left: 55%;
            transform: translate(-50%, -50%);
        }

        #man img {

            width: 200px;
            height: 200px;
        }

        #man {
            position: absolute;
            top: -20px;
            left: 55%;
        }

        #start img {
            width: 100px;
            height: 50px;
        }

        #start {
            position: absolute;
            left: 50%;
            top: 70%;
            transform: translate(-50%, -50%);
        }

        #score {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        #action img {

            width: 100px;
            height: 100px;
            animation: 10s;
        }

        #action {
            position: absolute;

            display: none;
           

        }

        #Conduit li {
            width: 64px;
            height: 423px;
            list-style-type: none;
            position: absolute;
            left: 400px;
            top: 0px;

        }

        .duct_up {
            background-image: url("img/up_mod.png");
            background-repeat: repeat-y;
            height: 120px;
            position: relative;
        }

        .duct_up img {
            position: absolute;
            bottom: 0;
        }

        .duct_down {
            background-image: url("img/down_mod.png");
            background-repeat: repeat-y;
            height: 200px;
            position: absolute;
            bottom: -108px;
            width: 100%;



        }

        .duct_down img {
            position: absolute;
            top: 0;
        }

        
        .over {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            display: none;
        }
        .change {
            z-index: 999;
            position: absolute;
            width: 80px;
            height: 30px;
           
            margin: auto 170px;
           
        }
       
        button {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20%;
            border: 1px blue solid;
            font-size: 15px;
            background-color: yellowgreen;
            font-weight: 800px;
            color: white;
        }
        button:hover{
            background-color:red;
        }
    </style>
</head>

<body>
    <audio autoplay="autopaly"  id="audios">
        <source src="bullet.mp3" type="audio/mp3"  />
    </audio>
    <audio autoplay="autopaly"  id="audios1">
        <source src="game_over.mp3" type="audio/mp3"  />
    </audio>
    <diV id="box">
        <!-- 头部 -->
        <div id="head">
            <img src="img/head.jpg">
        </div>
        <!-- 角色 -->
        <div id="man">
            <img src="3.gif">
        </div>
        <!-- 开始框 -->
        <div id="start">
            <img src="img/start.jpg" id="startBtn">
        </div>
        <!-- 分数 -->
        <div id="score" style="font-size: 50px; font-weight: 800; color: white;">
          得分：<span>0</span> 
        </div>
        <!-- 飞翔的角色 -->
        <div id="action">
            <img src="5.gif">
        </div>
        <!-- 管道 -->
        <ul id="Conduit"></ul>
        <div class="over">
            <img src="img/game_over.jpg">
        </div>
        <div class="change">
            <button>切换人物</button>
        </div>
    </diV>

    <script>
        window.addEventListener('load', function () {
            var startBtn = document.querySelector('#startBtn');
            var none = document.querySelectorAll('div');
            var Conduit = document.querySelector('#Conduit');
            var action = document.querySelector('#action');
            var score = document.querySelector('#score');
            var span=score.querySelector('span');
            var over=document.querySelector('.over');
            var music=document.querySelector('#music')
            var button=document.querySelector('button')
            var img=action.querySelector('img');
            // 开始
            var arr=["2.gif","5.gif","3.gif"];
            console.log(arr);
            var a=0;
           button.onclick=function(){
              
               img.src=arr[a];
               a=a+1;
               if(a>2){
                   a=0;
               }
           }
            startBtn.addEventListener('click', function () {

                // 隐藏
                none[1].style.display = 'none';
                none[2].style.display = 'none';
                none[3].style.display = 'none';
                none[5].style.display = 'block';
                none[4].style.top = "20%";
                var isDeltimer = false;
                var timer = null;
                var speed = 0;
               
                action.birdmovetimer = setInterval(function () {

                    speed += 0.5;


                    if (action.offsetTop >= 415) {
                        action.style.top = 415 + 'px';

                        clearInterval(action.birdmovetimer);
                        clearInterval(timer);
                        isDeltimer = true;
                        over.style.display="block";
                    }
                    action.style.top = action.offsetTop + speed + 'px';
                    // 碰撞检测
                    var row =document.querySelectorAll('.duct_row');
                    for(var i=0;i<row.length;i++){
                        var isCarsh=Crash(action,row[i]);
                        if(isCarsh==true){
                            clearInterval(action.birdmovetimer);
                            clearInterval(timer);
                            isDeltimer = true;
                            
                            over.style.display="block";
                            document.getElementById('audios1').play();
                            
                        }
                    }
                }, 30)
                document.onmousedown = function (e) {
                    var ev = e || window.event;
                    event.preventDefault();
                    speed = -5;
                    document.getElementById('audios').play();
                }
                
                // 随机函数改变管道的高度
                function ManthFn(min, max) {
                    return parseInt(Math.random() * (max - min + 1) + min);
                }
                var showtime=function (){
                    
                    var duct = document.createElement('li');
                    
                    var upheight = ManthFn(50, 100);
                    var downheight = 400 - upheight - 150;
                    duct.innerHTML = '<div class="duct_up duct_row" style="height:' + upheight + 'px"><img src="img/up_pipe.png"></div><div class="duct_down duct_row" style="height:' + downheight + '"><img src="img/down_pipe.png"></div>';
                    // 定义柱子出现的初始位置
                    var l = 400;
                    duct.scoreBol = true;
                    // 不断改变管道的位置
                    var movetimer = setInterval(function () {
                        l = l - 3;
                        duct.style.left = l + 'px';
                        if (l <= -62) {
                            Conduit.removeChild(duct);
                            clearInterval(duct.movetimer)
                        } else if (l <= -32) {
                            if (duct.scoreBol == true) {
                                span.innerHTML = parseInt(span.innerHTML) + 1;
                            }
                            duct.scoreBol = false;
                        }
                        if (isDeltimer == true) {
                            clearInterval(movetimer);
                        }
                    }, 30)
                    // 将创建的管道添加到外面
                    Conduit.appendChild(duct);
                
               }
                // 创建管道，每隔一段时间出现
                   timer = setInterval(showtime
                      ,2500)
           
                // 碰撞检测
                function Crash(obj1, obj2) {
                    // 人物左边
                    var obj1Left = obj1.offsetLeft;
                    // 整个人物在水平位置
                    var obj1Right = obj1Left + obj1.offsetWidth;
                    var obj1Top = obj1.offsetTop;
                    var obj1Bottom = obj1Top + obj1.offsetHeight;
                    // 管道左边
                    var obj2Left = obj2.parentNode.offsetLeft;
                    // 管道在水平方向
                    var obj2Right = obj2Left + obj2.offsetWidth;
                    var obj2Top = obj2.offsetTop;
                    var obj2Bottom = obj2Top + obj2.offsetHeight;
                    // 判断
                    if (obj1Right >= obj2Left && obj1Bottom >= obj2Top && obj1Left <= obj1Right && obj1Top <= obj2Bottom) {
                        // 发生碰撞
                        return true;

                    }
                    // 不发生碰撞
                    else {
                        return false;
                    }
                }
            })
            
 
        })
    </script>
</body>

</html>